Firebase Emulator Suiteを使おう
https://gyazo.com/2c2854040bbcdf153ee9e9a762f248f2
一昔前までは完全に使い物にならず、どう使うのかもよくわからなかったFirebase Emulator Suiteですが、ここにきてAuthが追加されて、これはもしかして…?と思いドキュメントを再度読んでみると、完全にいい感じになっていたのでいったんご紹介します。2020年11月中旬あたりの情報であることに留意してください。 firebase v8以上が必要な点に注意してください。useEmulatorとかが生えてなくて使い物になりません。
firebaseを突っ込んだプロジェクトで初期化をします。yarn add -D firebase-toolsをして、yarn firebase init emulatorsします。基本的なプロジェクトではAuthとFirestoreとFunctionsのみ有効化すればいいはずなので、これらをSpaceで選択して続行、エミュレータを落とすかどうか聞かれるので落とします。
設定はfirebase.jsonに書き込まれます。firestore emulatorが使う8080はうちの環境だとmitmproxyが占領していたので、8088としておきました。 次にプロジェクトにおける設定です。そこらのプロジェクトではFirebaseの初期化はどっかのファイルで一括でやってると思うので、そこをいじります。
私が今触ってたのはnextjsのプロジェクトなので、クライアントに伝搬させるために分岐の環境変数名はNEXT_PUBLIC_CIとしておきます。これがyesのときにエミュレータに接続するようにします。 code:firebase.ts
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import 'firebase/functions'
...中略
if (firebase.apps.length === 0) {
firebase.initializeApp(config)
if (process.env.NEXT_PUBLIC_CI === "yes") {
firebase.firestore().useEmulator("localhost", 8088)
app.functions('asia-northeast1').useEmulator('localhost', 5001)
}
}
export const app = firebase.app()
export const auth = app.auth()
export const firestore = app.firestore()
export const functions = app.functions('asia-northeast1')
firebaseのinitと同じで2回以上useEmulator()するとマジで切れ出すので、一回だけ初期化するようにします。useEmulator()する先とexportで露出するものは同一でなくて構いません。functionsにおいてはリージョン文字列を一致させると問題なく適用されます。
早速使ってみましょう。yarn firebase emulators:start とすると設定したエミュレータが立ち上がるので、vscの右ペインにでも開いておきましょう。
特定のものだけ立ち上げたい場合は--only auth,firestoreのようにします。
次にプロジェクトに環境変数を与えて立ち上げます。うちはnextなのでNEXT_PUBLIC_CI=yes yarn devで起動します。
WARNING: You are using the Auth Emulator, which is intended for local testing only. Do not use with production credentials.とか言い出したらうまく読み込めています。
サイト内に既に認証機構が仕込んである場合は、試しにコールしてみましょう。Twitter Authの場合でもダミーのデータを生成して読み込ませられるようになっています。すごい!
ただ現時点ではcurrentUser.linkWithPopupなどで既存のアカウントをTwitterに繋ごうとすると、本当のTwitterの連携ポップアップが出てしまうようです
直って〜
https://gyazo.com/e0ca6b55e1572dc85cf32f52bbe0a336
…ということで、前の使い物にならないEmulator Suiteのイメージのまま止まっている人は是非使ってみてください。
あんまりない例だと思いますが、オンラインのFirebaseに頼ってflakyなテストなどを書いてしまっているプロジェクトは、外部への依存を無くしてCIを走らせられるようになるのではないでしょうか。いいことです。
参考